//js
var ulList = document.querySelector('.tab-h-list')
var liItem = ulList.querySelectorAll('li')
var divList = document.querySelector('.tab-b').querySelectorAll('div')
ulList.addEventListener('click', function (e) {
  //其实可以给这个func抽出来
  for (let i = 0; i < liItem.length; i++) {
    //每次点击时都将所有内容class的active去掉
    liItem[i].className = 'tab-h-item'
    divList[i].className = 'tab-b-item'
  }
  var target = e.target
  // console.log(target)
  if (target == ulList) {
    //此处相当于是用了事件委托，免得要给每个子li元素绑定事件
    return
  } else if (target.href) {
    let parentLi = target.parentElement
    parentLi.className = 'tab-h-item active'
    // console.log(parentLi.getAttribute('index'))
    divList[parseInt(parentLi.getAttribute('index'))].className =
      'tab-b-item active'
  }
})
